<template>
	<view class="payment-results">
		<view class="top-box">
			<view class="status">
				<view class="icon">
					<u-icon name="checkbox-mark" color="#fff" size="42rpx"></u-icon>
				</view>
				<view class="label">支付成功</view>
			</view>
			<view class="price">
				<text class="text">实付金额</text>
				<text class="value">¥365.00</text>
			</view>
		</view>
		<view class="code-card">
			<view class="title">立刻领取小通AI数字人</view>
			<view class="code-box">
				<view class="label">兑换码</view>
				<view class="code">zxkRGvLk</view>
			</view>
			<button class="btn" @click="copyCode">复制去兑换</button>
			<view class="describe">
				<view class="describe-title">领取说明：</view>
				<view class="text">领取兑换码后可兑换算力，算力可制作AI数字人</view>
			</view>
		</view>
		<view class="button-box">
			<button class="btn" @click="goIndex">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			copyCode () {
				uni.setClipboardData({
					data: 'zxkRGvLk',
					success: () => {
						this.toMiniProgram()
					}
				})
			},
			toMiniProgram () {
				uni.navigateToMiniProgram({
					appId: '',
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						})
					}
				})
			},
			goIndex () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
.payment-results {
	box-sizing: border-box;
	padding: 0 30rpx;
	min-height: 100%;
	.top-box {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		.status {
			display: flex;
			align-items: center;
			justify-content: center;
			.icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #09bb07;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.label {
				margin-left: 18rpx;
			}
		}
		.price {
			margin-top: 36rpx;
			text-align: center;
			.text {
				color: #666666;
				font-size: 28rpx;
			}
			.value {
				margin-left: 20rpx;
				color: #333;
				font-size: 24rpx;
			}
		}
	}
	.code-card {
		margin: 38rpx 10rpx 0;
		padding: 44rpx;
		border-radius: 14rpx;
		background-color: #edffed;
		.title {
			color: #333333;
			font-size: 38rpx;
			font-weight: bold;
			text-align: center;
		}
		.code-box {
			margin-top: 66rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.label {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.code {
				margin-left: 26rpx;
				border-radius: 14rpx;
				border: 2rpx solid #c3f0c3;
				width: 388rpx;
				height: 100rpx;
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				line-height: 100rpx;
			}
		}
		.btn {
			margin-top: 40rpx;
			border-radius: 100rpx;
			height: 100rpx;
			color: #fff;
			font-weight: bold;
			font-size: 36rpx;
			line-height: 100rpx;
			background-color: #333333;
		}
		.describe {
			margin-top: 40rpx;
			color: #333333;
			font-size: 26rpx;
			.describe-title {
				font-weight: bold;
			}
		}
	}
	.button-box {
		margin-top: 218rpx;
		padding: 0 44rpx;
		.btn {
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			border: 1rpx solid #d2d2d2;
			border-radius: 88rpx;
			height: 88rpx;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 88rpx;
			background-color: transparent;
		}
	}
}
</style>
